在Vue.js的基本結構和功能之後，我們來稍微了解一下Vue.js中的元件系統(components system)是什麼。
使用元件系統就是想要將程式設計從一開始的"義大利麵程式碼"轉化為像堆積木一樣把架構做好區分、封裝來重複使用，也可以讓我們更容易進行程式碼的維護。每一個封裝好的元件單位都有自己的模板、樣式和邏輯，元件之中也可以包含更多元件來形成"元件樹"也就是在Vue.js中的元件系統的概念。

元件拆分

要從頭將一個網頁拆分成不同功能區域不是一件簡單的事情，不要切得太大也不想要切得太細，就可以先從常見的類型開始做起，以下是一些常見的分類:
1.展示型元件Presentation: 負責呈現UI畫面，單純把data傳送進去，DOM就會根據裡面的資料生成畫面，可以提升UI的重複使用性。
2.容器型元件Container: 負責與資料層的service進行溝通，做server、data之間的溝通邏輯，再將資料傳遞給展示行元件。
3.互動型元件Interactive: 通常包含了很多互動邏輯，與展示型元件同樣強調重複利用，包含表單、燈箱等互動元素，element UI和bootstrap的UI library都屬於此類型。
4.功能型元件Functions: 負責將原件內容做為某種應用的延伸或某種機制的封裝，、都是屬於這種類型。